:root {
    --primary-color: #1a2080;
    --primary-color-hover: #101452;
    --nav-color:#FFEAD2;
    --background-color:#ffead2bd;
    --brown-color:#9b7260;
    --brown-color-hover:#78594b;
    --yellow-color:#ffce2a;
    --white-color:#FFFFFF;
    --white-color-hover:#bababa;
    --black-color:#000000;
    --gold-color:#d69817;
    --whatsapp-color: #25d366;
}

* {
    box-sizing: border-box;
    font-family: "Poppins", Sans-serif !important;
}

    .carousel-item img{
        /* height: 100vh !important; */
        object-fit: cover !important;
    }

    .btn-primary {
        color: var(--white-color);
        background-color: var(--brown-color-hover);
        border-color: var(--brown-color-hover);
    }

    #mainNav{
        background-color: var(--nav-color) !important;
    }

    #mainNav .navbar-brand img {
        height: 3rem !important;
    }

    .nav-item.btn-reservasi a{
        display: none;
    }

    a.nav-link {
        color: var(--brown-color-hover) !important;
        font-family: "Poppins", Sans-serif !important;
        font-weight: 600 !important;
    }
    
    a.nav-link:hover {
        color: var(--brown-color) !important;
        font-family: "Poppins", Sans-serif !important;
        font-weight: 600 !important;
        text-decoration: underline;
    }
    
    nav a.btn {
        color: var(--white-color) !important;
        background-color: var(--brown-color-hover);
        font-family: "Poppins", Sans-serif !important;
        font-weight: 500 !important;
        font-size: 14px;
        border-style: none;
        border-radius: 200px 200px 200px 200px;
        padding: 10px 10px 10px 10px;
        }
        
    nav a.btn:hover {
        color: var(--white-color) !important;
        background-color: var(--brown-color-hover);
        font-family: "Poppins", Sans-serif !important;
        font-weight: 500 !important;
        font-size: 14px;
        border-style: none;
        border-radius: 200px 200px 200px 200px;
        padding: 10px 10px 10px 10px;
        transition-duration: 0.3s;
        transition-property: transform;
        transform: scale(0.9);
    } 

    li a.dropdown-item{
        color: var(--black-color);
    }

    li a.dropdown-item:hover{
        color: var(--black-color);
        background-color: #efddd5;
    }

   
/* Treatment Section */
section.treatment{
    background-color: var(--background-color);
}

section.treatment h3{
    color: var(--brown-color-hover);
}

section.treatment .card{
    background-color: var(--brown-color-hover);
    color: var(--white-color);
    border: none;
}

section.treatment .card .card-body a{
    background-color: var(--white-color);
    border-color: var(--white-color);
    color: var(--black-color);
}

section.treatment .card .card-body a:hover{
    background-color: var(--white-color-hover);
    color: var(--black-color);
}

section.treatment .treatmentSwiper h5{
    font-size: medium;
}

section.treatment .treatmentSwiper p{
    text-align: justify;
    font-size: small;
}

section.treatment .treatmentSwiper a{
    text-align: center;
    font-size: small;
}

section.treatment .treatmentSwiper .card{
   border-radius: 15px !important;
}

section.treatment .treatmentSwiper .card img{
   border-radius: 15px !important;
}

#btn-back-to-top {
    position: fixed;
    bottom: 30px;
    right: 10px;
    display: none;
    background-color:var(--gold-color) ;
    z-index: 1 !important;
    border: none;
}
#btn-discount {
    font-family: "Poppins", Sans-serif !important;
    position: fixed;
    bottom: 90px;
    left: 10px;
    background-color: var(--gold-color) !important;
    font-size: medium;       
    color: var(--white-color) !important;
    z-index: 1 !important;
    border: none;
}
#btn-chat-right {
    font-family: "Poppins", Sans-serif !important;
    position: fixed;
    bottom: 90px;
    right: 10px;
    background-color: var(--whatsapp-color) !important;
    font-size: medium;
    color: var(--white-color)  !important;
    z-index: 1 !important;
    border: none;
}

/* footer */
footer {
    background-color: var(--nav-color) !important;
    color: var(--brown-color-hover);
    font-family: "Poppins", Sans-serif !important;
}

footer img {
    max-width: 70%;
}

footer .container .alamat {
    text-align: left;
}

footer .container .waktu-operasional {
    text-align: left;
}

footer .treatment {
    color: var(--brown-color-hover);
    text-align: left;
}
footer .treatment a {
    margin-top: 0;
    color: var(--brown-color-hover);
    text-align: left;
    text-decoration: none;
}
footer .treatment a:hover {
    margin-top: 0;
    color: var(--brown-color);
    text-align: left;
    text-decoration: underline;
}

footer .social-media {
    color: var(--brown-color-hover);
    text-align: left;
}
footer .social-media a {
    margin-top: 0;
    color: var(--brown-color-hover);
    text-align: left;
    text-decoration: none;
}
footer .social-media a:hover {
    margin-top: 0;
    color: var(--brown-color);
    text-align: left;
    text-decoration: underline;
}
footer .olshop {
    color: var(--brown-color-hover);
    text-align: left;
}
footer .olshop a {
    margin-top: 0;
    color: var(--brown-color-hover);
    text-align: left;
    text-decoration: none;
}
footer .olshop a:hover {
    margin-top: 0;
    color: var(--brown-color);
    text-align: left;
    text-decoration: underline;
}

/* After Before */

section.after-before {
    /* background-image: url("../../storage/background-before-after.png"); */
    background-color: var(--brown-color-hover);
    text-align: center;
}

section.after-before p {
    text-align: justify;
}

section.after-before .container {
    color: var(--white-color);
    text-align: center;
}
section.after-before a {
    margin-top: 30px;
    transition: transform 0.4s;
    background-color: var(--white-color);
    border-color: var(--white-color);
    color: var(--black-color);
}
section.after-before a:hover {
    transition-duration: 0.3s;
    transition-property: transform;
    transform: scale(0.9);
    background-color: var(--white-color);
    border-color: var(--white-color);
    color: var(--black-color);
}

/* section.after-before .mySwiper{
   border-radius: 15px !important;
} */

section.after-before .mySwiper img{
   border-radius: 15px !important;
}

section.keunggulan{
    background-color: var(--background-color);
    color: var(--brown-color-hover);
}
section.keunggulan svg {
    color: var(--white-color) !important;
    transition: transform 0.4s; /* Animation */
}
section.keunggulan svg:hover {
    transform: scale(1.5);
}
section.keunggulan img {
    transition: transform 0.4s; /* Animation */
    max-width: 70px;
    max-height: 70px;
}
section.keunggulan img:hover {
    transform: scale(1.5);
}
section.keunggulan h4 {
    text-align: center !important;
}

section.keunggulan h6 {
    text-align: left !important;
}
section.keunggulan p {
    text-align: justify !important;
}
section.keunggulan .container {
    align-items: center;
    text-align: center;
}

section.keunggulan a {
    transition: transform 0.4s;
    background-color: var(--brown-color-hover);
    border-color: var(--brown-color-hover);
    color: var(--white-color);
}
section.keunggulan a:hover {
    transition-duration: 0.3s;
    transition-property: transform;
    transform: scale(0.9);
    background-color: var(--brown-color-hover);
    border-color: var(--brown-color-hover);
    color: var(--white-color);
}

section.promotion {
    /* background-image: url("../../storage/background-before-after.png"); */
    background-color: var(--brown-color-hover) !important;
    text-align: center;
}

section.promotion .container {
    color: var(--white-color);
    text-align: center;
}

section.promotion a {
    transition: transform 0.4s;
    color: var(--black-color);
    background-color: var(--white-color);
    border-color: var(--white-color);
}

section.promotion a:hover {
    transition-duration: 0.3s;
    transition-property: transform;
    transform: scale(0.9);
    color: var(--black-color);
    background-color: var(--white-color);
    border-color: var(--white-color);
}

section.promotion a.img-swiper {
    transition: transform 0.2s;
    color: none;
    background-color: none;
    border-color: none;
    border: none;
    border-radius: 15px;
}

section.promotion a.img-swiper:hover {
    transition-duration: 0.4s;
    transition-property: transform;
    transform: scale(0.9);
    color: none;
    background-color: none;
    border-color: none;
    border: none;
    border-radius: 15px;
}

section.promotion .promotionSwiper .swiper-slide {
    border-radius: 15px !important;
}

section.promotion .promotionSwiper img {
    border-radius: 15px !important;
}

/* Artikel */
section .article {
    padding: 1rem !important;
    margin: 1rem !important;
}
section .faq {
    padding: 1rem !important;
    margin: 1rem !important;
}

/* swiper before after */
.swiper {
    /* max-width: 1000px;
      max-height: 555px; */
    width: 100%;
    height: 100%;
    margin-right: 10px !important;
}

.swiper-slide {
    font-size: 18px;
    /* background: #444; */
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.swiper-button-prev {
  display: none !important;
}

.swiper-button-next {
  display: none !important;
}

/* Swiper Promotion */
.promotion .body {
    position: relative;
    height: 100%;
}

.body.promotion {
    margin-left: 10px;
    margin-top: 20px;
    margin-right: 10px;
    margin-bottom: 20px;
    padding: 0;
}

.swiper.promotion {
    width: 100%;
    height: 100%;
    margin-right: 10px !important;
}

.swiper-slide.promotion {
    text-align: center;
    font-size: 18px;
    background: #444;
    display: flex;
    justify-content: center;
    align-items: center;
}

.swiper-slide.promotion img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.container-flex-grow {
    margin: 0 auto;
    border: 1px solid lighten(black, 10);
    display: flex;
    align-items: center;
}

.item {
    flex-grow: 1;
    height: 100px;
    background-color: darkred;
    position: relative;
    border: 1px solid lighten(black, 10);
    transition: all 300ms ease-in-out;

    &:hover {
        flex-grow: 4.3;
        background-color: lighten(darkred, 20);
    }

    &:before {
        content: attr(data-order);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: white;
    }
}
/* article */
section.article {
    color: var(--primary-color);
}

.article h2 {
    margin-bottom: 20px;
}
.article a {
    text-decoration: none;
}
.article a:hover {
    text-decoration: underline;
}

.accordion-treatment {
    display: flex;
}
.accordion-treatment .tab {
    flex-grow: 1;
}
.accordion-treatment .tab:hover {
    flex-grow: 10;
}

/* FAQ */
section.faq{
    background-color: var(--brown-color-hover);
    color: var(--white-color);
}
section.faq .button {
    text-align: center;
}
section.faq .button-faq a {
    transition: transform 0.4s;
    color: var(--white-color);
    background-color: var(--brown-color-hover);
    border-color: var(--brown-color-hover);
}
section.faq .button-faq a:hover {
    transition-duration: 0.3s;
    transition-property: transform;
    transform: scale(0.9);
    color: var(--white-color);
    background-color: var(--brown-color-hover);
    border-color: var(--brown-color-hover);
}

section.faq .accordion{
    z-index: -1;
}

section.faq .accordion-button:not(.collapsed) {
    /* background-color: var(--white-color); */
    background-color: #e5e5e5;
    color: var(--brown-color-hover);
}

section.faq .accordion-button:focus{
    border-color: var(--brown-color-hover) !important;
}

section.faq .accordion-button{
    color: var(--brown-color-hover);
    font-weight: 600;
}

section.faq .accordion-body{
    color: var(--brown-color-hover);
}

/* banner treatment */
header.banner-treatment{
  padding-top: 2rem;
  padding-bottom: 1rem;
  text-align: justify;
  background-color: var(--background-color);
  color: var(--black-color);
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center;
  background-size: cover;
  position: relative;
}
header.banner-treatment .title-banner-treatment{
  text-align: left !important;   
  color: var(--brown-color-hover) !important;
}

.description-banner-treatment{
    color: var(--brown-color-hover);
}

.banner-treatment img {
    width: 100%;
    height: auto;
    display: block;
}

.banner-treatment .container {
  padding-top: 1rem;
}

header #carouselExampleSlidesOnly{
    margin-top: 70px !important;
}

header.banner-treatment img{
    margin-top: 40px !important;
}


/* promo-treatment */
section.promo-treatment{
    padding-top: 15px;
    padding-bottom: 20px;
    text-align: center;
    background-color: var(--brown-color-hover);
    color: var(--white-color);
}

section.promo-treatment a{
    border: none;
    background-color: var(--white-color);
    color: var(--black-color);
    font-weight: 600;
    transition: transform 0.4s;
}

section.promo-treatment a:hover{
    border: none;
    background-color: var(--white-color);
    color: var(--black-color);
    font-weight: 600;
    transition-duration: 0.3s;
    transition-property: transform;
    transform: scale(0.9);
}

/* Page Treatment Product */
section.product-treatment{ 
    padding-top: 1rem; 
    padding-bottom: 1rem; 
    background-color: var(--background-color);
    color: var(--brown-color-hover);
} 
section.product-treatment h3{
    color: var(--brown-color-hover);
    text-align: center;
}
section.product-treatment h6{
    color: var(--white-color);
    text-align: center;
    text-decoration: underline;
}
section.product-treatment .card{
    margin: 2rem; 
    border-color: var(--black-color) !important;
    background-color: var(--brown-color-hover);
    color: var(--white-color); 
}
section.product-treatment .card-body{
    color: var(--black-color);
}
section.product-treatment p{
    text-align: justify; color: var(--white-color);
    font-size: 14px;
}
section.product-treatment hr{
    color: var(--white-color);
    border-top: 2px solid;
    opacity: 20;
    margin-top: 0px;
    margin-bottom: 5px
}

section.product-treatment a{
    background-color: var(--white-color);
    border-color: var(--white-color);
    color: var(--black-color);
    border: none;
    font-weight: 600;
    
}
section.product-treatment a:hover{
    border: none;
    background-color: var(--white-color);
    border-color: var(--white-color);
    color: var(--black-color);
    font-weight: 600;
    transition-duration: 0.3s;
    transition-property: transform;
    transform: scale(0.9);
}

/* manfaat treatment */
section.manfaat-treatment{
    background-color: var(--brown-color-hover);
    color: var(--white-color);
    padding-top: 1rem;
    padding-bottom: 1rem;
    /* background-color: var(--primary-color); */
}

section.manfaat-treatment h5{
   text-align: center;
   color: var(--white-color);
}

section.manfaat-treatment img {
  transition: transform 0.4s ease;
}
section.manfaat-treatment img:hover {
  transform: scale(1.1); /* Zoom in 10% */
}
section.manfaat-treatment li{
  font-size: 14px;
  font-weight: 600;
  color: var(--white-color);
}
section.manfaat-treatment li:hover{
  color: var(--white-color-hover);
}

/* tips treatment */
section.tips-treatment{
    background-color: var(--brown-color-hover);
    padding-top: 1rem;
    padding-bottom: 1rem;
    color: var(--white-color);
    /* background-color: var(--primary-color); */
}

section.tips-treatment h5{
   color: var(--white-color);
}
section.tips-treatment img{
   max-width: 420px;
   max-height: 240px;
}
 section.tips-treatment ul {
    padding-left:0px;      
}

section.tips-treatment a{
    background-color: var(--white-color);
    border-color: var(--white-color);
    color: var(--black-color);
    border: none;
    font-weight: 600;
    
}
section.tips-treatment a:hover{
    border: none;
    background-color: var(--white-color);
    border-color: var(--white-color);
    color: var(--black-color);
    font-weight: 600;
    transition-duration: 0.3s;
    transition-property: transform;
    transform: scale(0.9);
}

/* keunggulan Treatment*/
section.keunggulan-treatment{
  background-color: var(--background-color);
  color: var(--brown-color-hover);
}

section.keunggulan-treatment .card{
  background-color: var(--brown-color-hover);
  color: var(--white-color);
}

section.keunggulan-treatment li{
  color: var(--white-color);
}

section.keunggulan-treatment .button a{
    background-color: var(--brown-color-hover);
    color: var(--white-color);
    border-radius: 50rem;
}

section.keunggulan-treatment .button a:hover{
    background-color: var(--brown-color);
    color: var(--white-color);
    border-radius: 50rem;
    transition-duration: 0.3s;
    transition-property: transform;
    transform: scale(0.9);
}

/* tahapan */
section.tahapan-treatment{
    background-color: var(--background-color);
    color: var(--brown-color-hover);
}
section.tahapan-treatment ul{
  display: inline-block;
  text-align: left;
  list-style-type: none;
}


/* Filter Produk */
 .category-btns .btn {   
    color: var(--black-color); /* Bootstrap primary */   
    border-color: var(--black-color); 
    /* padding-top: 2px !important; */
  }

 .category-btns .btn.active {
    background-color: var(--brown-color-hover); /* Bootstrap primary */
    color: var(--white-color); /* Bootstrap primary */
    border-color:  var(--brown-color-hover);
  }

 .category-btns .btn:hover {
    background-color: var(--brown-color-hover); /* Bootstrap primary */
    color: var(--white-color); /* Bootstrap primary */
    border-color:  var(--brown-color-hover);
  }

  .category-btns .btn {
    transition: all 0.2s ease-in-out;
  }

  /* Baner Produk */
  header.banner-product{
    background-color: var(--background-color);
    color: var(--black-color);
  }

  header.banner-product img{
    margin-top: 74px !important;
  }

  section.page-product{
    padding-top: 1rem !important;
    padding-bottom: 3rem !important;
    background-color: var(--brown-color-hover);
    color: var(--white-color);
  }

  
    section.page-product .category-btns button{
      background-color: var(--white-color);
      color: var(--black-color);
      border: none;
    }

    section.page-product .category-btns button.active{
        background-color: var(--white-color-hover);
        color: var(--black-color);
        border: none;
    }

    section.page-product .card.product-card{
        background-color: var(--white-color);
        color: var(--black-color);
        border: none;
    }

    section.page-product .card.product-card a{
        background-color: var(--brown-color-hover) !important;
        border-color: var(--brown-color);
        color: var(--white-color);
        border-radius: 30px;        
    }

    section.page-product .card.product-card a:hover{
        background-color: var(--brown-color-hover) !important;
        border-color: var(--brown-color);
        color: var(--white-color);
        border-radius: 30px;
        transition-duration: 0.3s;
        transition-property: transform;
        transform: scale(0.9);  
    }

    /* Konsultasi Dokter */
    section.konsultasi-dokter{
        background-color: var(--background-color);
        color: var(--brown-color-hover);
    }

    .konsultasi-dokter {
        position: relative;
        width: 100%;
        height: 360px;
        overflow: hidden;
    }

    /* Teks Absolute */
    .konsultasi-dokter-text {
        position: absolute;
        top: 30%;
        left: 30px; /* posisi kiri */
        transform: translateY(-50%);
        max-width: 450px;
        text-align: left;
        color: var(--brown-color-hover);
        padding: 20px 24px;
    }

    .konsultasi-dokter-text h3 {
        font-size: 34px !important;
        font-weight: 700;
        margin-bottom: 10px;
    }

    .konsultasi-dokter-text h5 {
        font-size: 18px !important;
        font-weight: 400;
        line-height: 1.6;
    }

    .konsultasi-dokter-text a {
        position: absolute;
        top: 100%;
        left: 90px; /* posisi kiri */
        transform: translateY(-50%);
        background-color: var(--brown-color-hover);
        color: var(--white-color);
    }

    .konsultasi-dokter-text a:hover {
        position: absolute;
        top: 100%;
        left: 90px; /* posisi kiri */
        transform: translateY(-50%);
        background-color: var(--brown-color);
        color: var(--white-color);
    }

  
/* Responsive */
@media (max-width: 820px) {

    footer img{
        padding-bottom: 15px;
    }
    
    nav a.btn{
        display: none;
    }

    .nav-item.btn-reservasi a{
        text-align: center;
        color: var(--white-color) !important;
        background-color: var(--brown-color-hover);
        font-family: "Poppins", Sans-serif !important;
        font-weight: 500 !important;
        font-size: 14px !important;
        border-style: none !important;
        width: 150px;
        border-radius: 200px 200px 200px 200px !important;
        padding: 10px 10px 10px 10px !important;
        text-decoration: none !important;
        display: block;
    }
     /* .carousel-item img{
        height: 80vh !important;
        object-fit: cover !important;
        object-position: left !important;
    } */

    /* Product Treatment */
    section.product-treatment .col-md-6{
        width: 100%;
    }

    /* Manfaat Treatment */
    section.manfaat-treatment col-md-6 {
        width: 100%;
    }

    section.manfaat-treatment img {
        display: block;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        border-radius: 30px;
    }

     section.keunggulan h6 {
       color: var(--brown-color-hover) !important;
        text-align: center !important;
    }
    section.keunggulan p {
        color: var(--brown-color-hover) !important;
        text-align: center !important;
    }

    
    /* Konsultasi Dokter */
     .konsultasi-dokter .banner-img {
        height: 40vh !important;
        object-fit: cover !important;
        object-position: right !important;
        filter: blur(6px);
        transform: scale(1.05); /* agar blur tidak menyisakan tepi putih */
    }

    .konsultasi-dokter-text h3 {
        text-align: center;
        font-size: 24px;
    }

    .konsultasi-dokter-text h5 {
        font-size: 16px;
        font-weight: 500px;
    }
}

@media (max-width: 768px) {
    footer img{
        padding-bottom: 15px;
    }

    .nav-item.btn-reservasi a{
        text-align: center;
        color: var(--white-color) !important;
        background-color: var(--brown-color-hover);
        font-family: "Poppins", Sans-serif !important;
        font-weight: 500 !important;
        font-size: 14px !important;
        border-style: none !important;
        width: 150px;
        border-radius: 200px 200px 200px 200px !important;
        padding: 10px 10px 10px 10px !important;
        text-decoration: none !important;
        display: block;
    }

    .carousel-item img{
        height: 50vh !important;
        object-fit: cover !important;
        object-position: right !important;
    }

    .banner-treatment img{
        height: 30vh !important;
        object-fit: cover !important;
        object-position: right !important;
    }

    .banner-product img{
        height: 30vh !important;
        object-fit: cover !important;
        object-position: right !important;
    }

    nav a.btn{
        display: none;
    }

    header.banner-treatment{
        padding-top: 2rem;
        padding-bottom: 1rem;
        text-align: justify;
        background-color: var(--background-color);
        color: var(--black-color);
        background-repeat: no-repeat;
        background-attachment: scroll;
        background-position: center;
        background-size: cover;
        position: relative;
    }
    header.banner-treatment .title-banner-treatment{       
        text-align: left !important;
    }

    /* keunggulan */
    section.keunggulan-treatment{
        padding-bottom: 1rem !important;
    }

    section.keunggulan-treatment .title{
        text-align: left;
        color: var(--brown-color-hover) !important;
    }

    section.keunggulan-treatment .row{
        margin: 1rem;
    }

    section.tips-treatment .row{
    margin: 1rem;
    }

    section.keunggulan h6 {
        color: var(--brown-color-hover) !important;
        text-align: center !important;
    }
    section.keunggulan p {
        color: var(--brown-color-hover) !important;
        text-align: justify !important;
    }

    /* Manfaat Treatment */
    section.manfaat-treatment img {
        display: block;
        max-width: 80%;
        margin-left: auto;
        margin-right: auto;
        border-radius: 30px;
    }

    /* tips */
    section.tips-treatment img {
        display: block;        
        margin-left: auto;
        margin-right: auto;        
    }

    section.tips-treatment ul {
       padding-left:0px;      
    }

    section.tips-treatment h5 {
       text-align: left !important;  
       padding-top: 10px !important;    
    }

    section.promotion h3{
        text-align: justify;
        font-size: large;
    }

    section.promotion p{
        text-align: justify;
        font-size: medium;
    }

    /* Konsultasi Dokter */
     .konsultasi-dokter .banner-img {
        height: 40vh !important;
        object-fit: cover !important;
        object-position: right !important;
        filter: blur(6px);
        transform: scale(1.05); /* agar blur tidak menyisakan tepi putih */
    }

    .konsultasi-dokter-text h3 {
        text-align: center;
        font-size: 24px !important;
    }

    .konsultasi-dokter-text h5 {
        font-size: 16px !important;
         font-weight: 500px;
    }

    .konsultasi-dokter-text a {
        position: absolute;
        top: 100%;
        left: 60px !important; /* posisi kiri */
        transform: translateY(-50%);
        background-color: var(--brown-color-hover);
        color: var(--white-color);
    }

    .konsultasi-dokter-text a:hover {
        position: absolute;
        top: 100%;
        left: 60px !important; /* posisi kiri */
        transform: translateY(-50%);
        background-color: var(--brown-color);
        color: var(--white-color);
    }

}


@media (max-width: 393px) {
     /* Konsultasi Dokter */
      .konsultasi-dokter-text h3 {
        text-align: center;
        font-size: 24px !important;
        left: 45px !important;
    }

    .konsultasi-dokter-text h5 {
        font-size: 16px !important;
        left: 45px !important;
         font-weight: 500px;
    }

     .konsultasi-dokter .banner-img {
        height: 50vh !important;
        object-fit: cover !important;
        object-position: right !important;
        filter: blur(6px);
        transform: scale(1.05); /* agar blur tidak menyisakan tepi putih */
    }

    .konsultasi-dokter-text a {
        position: absolute;
        top: 100%;
        left: 45px !important; /* posisi kiri */
        transform: translateY(-50%);
        background-color: var(--brown-color-hover);
        color: var(--white-color);
    }
    .konsultasi-dokter-text a:hover {
        position: absolute;
        top: 100%;
        left: 45px; /* posisi kiri */
        transform: translateY(-50%);
        background-color: var(--brown-color);
        color: var(--white-color);
    }

}